<template>
  <div class="acticleContainer">
    <div v-if="imageNum === 3">
      <p>{{title}}</p>
    <div class="bgBox">
      <span><img :src="imageURL[0]" alt=""></span>
      <span style="margin: 5px;"><img :src="imageURL[1]" alt=""></span>
      <span><img :src="imageURL[2]" alt=""></span>
    </div>
    <div class="actileInfo">
      <div class="authorbox">作者:{{author}}</div>
      <div class="commentbox" style="margin: 0 10px;">评论:{{commentNum}}</div>
      <div class="timebox">发布日期: {{times | formatTime}} 年前</div>
    </div>
    </div>
    <!-- 图片返回一张时显示的效果 -->
      <div v-elseif="imageNum === 1">
      <div class="bgBox">
        <p style="flex: 70%;padding-right: 10px;">{{title}}</p>
        <span style="flex: 30%;"><img :src="imageURL[0]" alt=""></span>
      </div>
      <div class="actileInfo">
        <div class="authorbox">作者:{{author}}</div>
        <div class="commentbox" style="margin: 0 10px;">评论:{{commentNum}}</div>
        <div class="timebox">发布日期: {{times | formatTime}} 年前</div>
      </div>
      </div>
      <!-- 当没有图片返回时的效果 -->
      <div v-elseif="imageNum === 0">
        <p style="color: #444;">{{title}}</p>
      <div class="actileInfo" style="margin-top: 10px">
        <div class="authorbox">作者:{{author}}</div>
        <div class="commentbox" style="margin: 0 10px;">评论:{{commentNum}}</div>
        <div class="timebox">发布日期: {{times | formatTime}} 年前</div>
      </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'myActicle',
  props: {
    title: {
      default: '文章标题',
      type: String
    },
    // 文章图片
    imageURL: {},
    // 文章作者
    author: {
      type: String
    },
    // 文章评论
    commentNum: {},
    times: {
      default: '2年前'
    },
    // 图片数量
    imageNum: {
      type: Number
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
  .acticleContainer{
    padding: 10px 0 5px;
    margin: -1px 15px 0;
    font-size: 14px;
    // background-color: red;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    p{
      color: #444;
    }
    .bgBox{
      margin-top: 5px;
      // margin-bottom: 5px;
      height: 90px;
      display: flex;
      span{
        flex: 1;
        // border: 1px solid #ccc;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .actileInfo{
      position: relative;
      display: flex;
      color: #aaa;
      font-size: 12px;
      .closure{
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        text-align: center;
        color: #444;
      }
    }
  }
</style>
